import { Label } from "@renderer/components/ui/base/field";
import { Select } from "@renderer/components/ui/base/select";
import { cn } from "@renderer/lib/utils";
import { useLayoutModeSetting } from "@renderer/queries/hooks/use-settings";
import type { Key } from "react-aria-components";
import { useTranslation } from "react-i18next";

const { settingsService } = window.service;

export function LayoutMode() {
  const { t } = useTranslation("translation", {
    keyPrefix: "settings.general-settings.layout-mode",
  });

  const { data: layoutMode } = useLayoutModeSetting();

  const layoutOptions = [
    { key: "default", label: t("options.default") },
    { key: "wide", label: t("options.wide") },
    { key: "ultra-wide", label: t("options.ultra-wide") },
  ];

  const handleLayoutModeChange = async (key: Key | null) => {
    if (key) {
      await settingsService.setLayoutMode(
        key as "default" | "wide" | "ultra-wide",
      );
    }
  };

  return (
    <div className="flex flex-col gap-2">
      <Label className="text-label-fg">{t("label")}</Label>
      <Select
        className="min-w-full"
        selectedKey={layoutMode ?? "default"}
        onSelectionChange={handleLayoutModeChange}
        aria-label="Layout Mode"
      >
        <Select.Trigger className="inset-ring-transparent h-11 rounded-[10px] bg-setting text-setting-fg transition-none hover:inset-ring-transparent" />
        <Select.List className="min-w-full" items={layoutOptions}>
          {({ key, label }) => (
            <Select.Option
              className={cn(
                "flex cursor-pointer justify-between",
                "[&>[data-slot='check-indicator']]:order-last [&>[data-slot='check-indicator']]:mr-0 [&>[data-slot='check-indicator']]:ml-auto",
              )}
              key={key}
              id={key}
              textValue={label}
            >
              <span className="flex items-center gap-2">
                <span className="text-sm">{label}</span>
              </span>
            </Select.Option>
          )}
        </Select.List>
      </Select>
    </div>
  );
}
